<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <script src="/jquery-validate/dist/jquery.validate.min.js"></script>
    <script src="/jquery-validate/dist/localization/messages_zh.min.js"></script>
    <style>
        .error{
            color: red;
            background-color: #EAA5A5;
        }
    </style>

</head>
<body>
<hr>

<div class="row">
    <div class="col-md-2 text-center bg-primary" style="height: 650px;width: 250px;background-image:url('/image/111.jpg');"> <!-- 左边区域 -->
        <button type="button" class="btn btn-primary" onclick="xinxi();">学生信息</button>
        <hr>
        <button type="button" class="btn btn-success" onclick="chengji();">成绩管理</button>
        <hr>
        <button type="button" class="btn btn-info" onclick="xuanke();">选课</button>
        <hr>
        <button type="button" class="btn btn-warning" onclick="existe();">退出登录</button>
    </div>
    <div class="col-md-8"> <!-- 右边区域 -->
        <div class="col-xs-12 bg-primary" style="height: 100px;width: 980px;background-image:url('/image/221.jpg');"></div>
        <hr><hr><hr><hr><hr>
        <div class="container-fluid">

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                打分
            </button>

            <form class="form-inline">
                <div class="form-group">
                    <label for="searchName">请输入名字</label>
                    <input type="text" class="form-control" id="searchName" placeholder="请输入名字" name="searchName">
                </div>

                <button type="button" class="btn btn-default btn-primary" onclick="search();">查询</button>
            </form>

            <table class="table table-bordered" id="stuTable">

            </table>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content" id="xue">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">学生成绩</h4>
                    </div>
                    <div class="modal-body">


                        <form id="formStudent">
                            <input hidden="hidden" id="id" name="id">
                            <div class="form-group">
                                <label for="stu_no">学生学号</label>
                                <input type="text" class="form-control" id="stu_no" name="stu_no" placeholder="学号" required minlength="2" maxlength="10">
                            </div>
                            <div class="form-group">
                                <label for="type">课名</label>
                                <input type="text" class="form-control" id="type" name="type" placeholder="课名" required minlength="2" maxlength="10">
                            </div>

                            <div class="form-group">
                                <label for="score">成绩</label>
                                <input type="text" class="form-control" id="score" name="score" placeholder="成绩" max="100" min="0">
                            </div>
                            <!--                表单结束-->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>





<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/jquery-validate/dist/jquery.validate.min.js"></script>
<script src="/jquery-validate/dist/localization/messages_zh.min.js"></script>


<script type="text/javascript">
    function xinxi(){
        window.location.href="/student/list";
    }
    function chengji(){
        window.location.href="/student/score";
    }
    function xuanke(){
        window.location.href="/student/course";
    }
    function existe(){
        window.location.href="/student/tuichu";
    }
   function search() {

       $('#stuTable').bootstrapTable("destroy")
       loadTable();
   }
   function preAdd(){
       $("#id").val(0);//新增

   }

   //新增或更新
   function saveStudent(){


       var data=$("#formStudent").serialize();

       var id=$("#id").val();
       if(id<1){
           //新增
           $.ajax({

               url:"/webapi/score/insert",
               method:"post",

               data:data

           }).done(function () {
               $('#stuTable').bootstrapTable("destroy");
               loadTable();
               $('#myModal').modal('hide')
           })
       }else {
           //更新

           $.ajax({

               url:"/webapi/score/update",
               method:"put",

               data:data

           }).done(function () {
               $('#stuTable').bootstrapTable("destroy")
               loadTable();
               $('#myModal').modal('hide')
           })
       }


   }

   function edit(id){
       $('#myModal').modal('show')

       $.ajax({
           url:"/webapi/score/get/"+id
       }).done(function (rs) {

           $("#id").val(rs.id);
           $("#stu_no").val(rs.stu_no);
           $("#type").val(rs.type);
           $("#score").val(rs.score);
       })
       $('#stuTable').bootstrapTable("destroy")
       loadTable();
   }

   function deleteStudent(id){
       if(confirm("你确定要删除这个学生的成绩吗？此操作不能反悔！！！")){
           $.ajax({

               url:"/webapi/score/delete/"+id,
               method:"delete"

           }).done(function () {
               $('#stuTable').bootstrapTable("destroy")
               loadTable();
           })
       }

   }

   function actionFormatter(value, row, index) {
       var id = value;
       var result = "";
       result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"edit('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-new-window'></span></a>";
       result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"deleteStudent('" + id + "')\" title='删除' ><span class='glyphicon glyphicon-trash'></span></a>";
       return result;
   }

   function loadTable(){
       $('#stuTable').bootstrapTable({
           url: '/webapi/score/getbypage',
           striped:true,//设置true隔行变色
           pagination:true,//设置true在底部显示分页条
           singleSelect: false,//设置true禁止多选
           pageSize:4,//每页分页条书
           pageNumber:1,//首页页码
           sidePagination: "server",//在那里分页
           queryParams:function (params){
               var paraObj = {
                   size: params.limit,
                   page:params.offset/params.limit,
                   sort:"id",
                   direct:"desc",
                   stu_no:$("#searchName").val()

               };

               return paraObj;
           },
           columns: [{
               field: 'id',
               title: '序号'
           }, {
               field: 'stu_no',
               title: '学生学号'
           },{
               field: 'type',
               title: '课名'
           }, {
               field: 'score',
               title: '成绩'
           },{
               field: 'id',
               title: '操作',
               formatter: actionFormatter,
           },]
       })
   }//loadTable()结束
   $(function() {
       loadTable();
   })


   $(function () {
       $("#formStudent").validate({
           submitHandler: saveStudent
       });
   })

</script>

</body>
</html>